<%--
  Created by IntelliJ IDEA.
  User: 徐洲
  Date: 2023/12/15
  Time: 21:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="com.bean.Category" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  request.setCharacterEncoding("UTF-8");
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<jsp:useBean id="categoryDao" class="com.daoImpl.CategoryDAOImpl"></jsp:useBean>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>摆烂俱乐部</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <!-- Google fonts - Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
  <!-- owl carousel-->
  <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
  <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="favicon.png">
  <!-- Tweaks for older IEs--><!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>

<%--  获取用户名--%>
<%String username = (String) session.getAttribute("username");%>
<!-- navbar-->
<header class="header mb-5">
  <!--
  *** 头部 ***
  _________________________________________________________
  -->
  <jsp:include page="common/login.jsp"></jsp:include>

  <jsp:include page="common/top2.jsp"></jsp:include>
  <!-- 搜索 -->
  <jsp:include page="common/search.jsp"></jsp:include>
</header>


<%
  List<Category> categoryList = categoryDao.getCategoryName();
  request.setAttribute("categoryList", categoryList);
%>
<div id="all">
  <div id="content">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <!-- breadcrumb-->
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="index.jsp">家</a></li>
              <li aria-current="page" class="breadcrumb-item active">发布文章</li>
            </ol>
          </nav>
        </div>

          <form class="col-lg-12" style="display: flex;" method="post" action="./article?action=add" enctype="multipart/form-data">
            <div class="col-lg-6" style="flex: 1">
              <div class="box">
                <h1>新文章</h1>
                <p class="lead">&nbsp;&nbsp;&nbsp;&nbsp;让我们携手，用文字描绘出更美好、更有温度的世界，唤起共鸣，点亮灵魂。</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;每个人都拥有无穷的创造力和影响力，而你的声音正是改变世界的关键。在这个充满挑战和机遇的时代，我们需要更多激发思考、传播知识、唤起共鸣的声音。无论你身处何地，无论你的经历如何，你的见解和思考都有力量。</p>
                <p class="text-muted">&nbsp;&nbsp;&nbsp;&nbsp;发表文章，就是在为自己的信念和价值观找到表达的平台。是的，你的观点可以点亮别人的心灵，你的经历可以启发更多人勇敢面对生活。不要忽视你的独特之处，因为正是这独特的一面赋予了你无限的创意和力量。</p>
                <hr>
                <input name="userid" type="hidden" value="<%=session.getAttribute("userid")%>">
                <div class="form-group">
                  <label for="article_title">文章标题</label>
                  <input name="article_title" id="article_title" required type="text" class="form-control">
                </div>
                <div class="form-group">
                  <label for="category_id" class="col-form-label">文章分类</label>
                  <select name="category_id" id="category_id" class="form-control">
                    <c:forEach items="${categoryList}" var="item">
                      <option value="${item.category_id}">${item.category_name}</option>
                    </c:forEach>
                  </select>
                </div>
                <div class="form-group text-center">
<%--                  <input type="file" name="article_cover" id="file" accept="image/png,image/jpeg">--%>
<%--                  <input type="file" name="article_cover" id="file" accept="image/png,image/jpeg" style="display:none;">--%>
<%--                  <button type="button" class="btn btn-primary" onclick="document.getElementById('file').click()"> 上传文章封面图片</button>--%>

  <input type="file" name="article_cover" id="file" accept="image/png,image/jpeg" style="display:none;">
  <button type="button" class="btn btn-primary" onclick="document.getElementById('file').click()"> 上传文章封面图片</button>
  <span id="filename"></span>
                </div>
                <div class="form-group text-center">
                  <button type="submit" name="submit" class="btn btn-primary"><i
                          class="fa fa-user-md"></i> 发布
                  </button>
                </div>
              </div>
            </div>
            <div class="col-lg-6" style="flex: 1">
              <div class="box">
                <h1>填写文章内容</h1>
                <p class="lead">
                  &nbsp;&nbsp;&nbsp;&nbsp;"字如其人，文章如其心。在你的文字里，你不仅是作者，更是一位启发者、感染者，唤起共鸣的使者。勇敢地分享，因为你的言辞或许是别人心中的一盏明灯。"</p>
                <hr>
                <div class="form-group">
                  <textarea class="form-control custom-textarea" required rows="20" name="content"></textarea>
                </div>
              </div>
            </div>
          </form>

      </div>
    </div>
  </div>
</div>
<!--
    *** 版权 ***
    _________________________________________________________
    -->
<jsp:include page="common/copyright.jsp"></jsp:include>

<!-- *** COPYRIGHT END ***-->
<!-- JavaScript files-->
<script>
  document.getElementById('file').addEventListener('change', function() {
    const filename = this.value.split('\\').pop();
    document.getElementById('filename').textContent = filename;
  });
</script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
<script src="js/front.js"></script>
</body>
</html>